﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html, body {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
			font-family: '微软雅黑';
			font-size: 14px;
		}

		.container {
			width: 1000px;
			height: 2000px;
			margin: 50px auto;
			background-color: #ccc;
		}

		.navTop {
			border-bottom: 2px solid #B1191A;
			height: 44px;
			font-size: 16px;
		}

			.navTop .navTopLeft {
				display: inline-block;
			}

				.navTop .navTopLeft a {
					display: inline-block;
					line-height: 44px;
					padding: 0 10px;
					text-decoration: none;
					background-color: #B1191A;
					width: 210px;
					color: #FFFFFF;
				}

			.navTop .navTopUl {
				display: inline-block;
			}

				.navTop .navTopUl li {
					display: inline-block;
				}

					.navTop .navTopUl li a {
						display: inline-block;
						line-height: 44px;
						padding: 0 20px;
						text-decoration: none;
						color: #333333;
					}

						.navTop .navTopUl li a:hover {
							color: #C81623;
						}

		.navLiDiv {
			width: 210px;
			display: inline-block;
			background-color: red;
		}
			.navLiDiv .navUl{
				display:inline-block;
			}
				.navLiDiv .navUl .navLi1 {
					display: inline-block;
					width: 100%;
				}
					.navLiDiv .navUl .navLi1 a {
						display: inline-block;
						line-height: 30px;
						padding-right:0 10px;
						text-decoration:none;
						color:#ffffff;
					}
					.navLiDiv .navUl .navLi1:hover {
						color: #B61D1D;
						background-color: #F7F7F7;
					}
						.navLiDiv .navUl .navLi1:hover .navLiDiv .navUl .navLi1 a {
							color: #FF0000;
						}
	</style>
</head>
<body>
	<div class="container">
		<div class="navTop">
			<div class="navTopLeft">
				<a href="javascript:;">全部商品分类</a>
			</div>
			<ul class="navTopUl">
				<li><a href="javascript:;">京东服饰</a></li>
				<li><a href="javascript:;">京东服饰</a></li>
				<li><a href="javascript:;">京东服饰</a></li>
			</ul>
		</div>
		<div class="navLiDiv">
			<ul class="navUl">
				<li class="navLi1"><a href="javascript:;">家用电器</a></li>
				<li class="navLi1"><a href="javascript:;">家用电器</a></li>
				<li class="navLi1"><a href="javascript:;">家用电器</a></li>
				<li class="navLi1"><a href="javascript:;">家用电器</a></li>
				<li class="navLi1"><a href="javascript:;">家用电器</a></li>
			</ul>
		</div>
	</div>
</body>
</html>